<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    table-layout="auto"
    ref="multipleTableRef"
    @selection-change="handleSelectionChange"
  >
    <el-table-column label="Operations">
      <template #default="scope">
        <el-popover effect="light" trigger="click" placement="top" width="auto">
          <template #default>
            <div>新增</div>
            <div>
              name:
              <el-input v-model="scope.row.name"></el-input>
            </div>
            <div>
              address:
              <el-input v-model="scope.row.address"></el-input>
            </div>
          </template>
          <template #reference>
            <el-button size="small" @click="handleAdd(scope.$index, scope.row)">
              Add
            </el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60px"></el-table-column>
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="地址" width="auto">
      <template #default="scope">
        <div>address: {{ scope.row.address }}</div>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-popover effect="light" trigger="click" placement="top" width="auto">
          <template #default>
            <div>修改</div>
            <div>
              name:
              <el-input v-model="scope.row.name"></el-input>
            </div>
            <div>
              address:
              <el-input v-model="scope.row.address"></el-input>
            </div>
          </template>
          <template #reference>
            <el-button
              size="small"
              @click="handleEdit(scope.$index, scope.row)"
            >
              Edit
            </el-button>
          </template>
        </el-popover>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'

interface User {
  date: string
  name: string
  address: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}
const handleAdd = (index: number, row: User) => {
  console.log(index, row)
  tableData.push({
    date: '2022-xx-xx',
    name: row.name,
    address: row.address,
  })
}
const handleSelectionChange = (val: User[]) => {
  console.log(val)
}
let tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
